<template>
  <div class="table_con">
    <el-row>

      <tableComponents
        :isShow="false"
        @toAdd='dialogFormVisible = true'
        :isHaveExport="false"
        :isHavePagination="false"
      >
        <template v-slot:table>
          <el-table
            :data="data"
            v-loading="loading"
            style="width: 100%;margin-bottom: 20px;"
            border
            row-key="id"
          >
            <el-table-column label="分类名称" min-width="200">
              <template slot-scope="scope">
                <div class="tree_yiji">
                  {{scope.row.title}}
                  <div class="three_title">{{scope.row.three}}级栏目(下属分类{{scope.row.length}}个)</div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="排序" sortable :sort-method="sorta" align="center" width="80">
              <template slot-scope="scope">
                <div>
                  <el-input
                    @change="sortNew(scope.$index,scope.row)"
                    v-model.number="scope.row.sort"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="分类图片" min-width="100" align="center">
              <template slot-scope="scope">
                <div class="img_bor">
                  <img :src="$fnc.getImgUrl(scope.row.piclink)" alt />
                </div>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" min-width="100" align="center">
              <template slot-scope="scope">{{scope.row.created_time | getTimeFormat}}</template>
            </el-table-column>

            <el-table-column label="操作" min-width="100" align="center">
              <template slot-scope="scope">
                <el-button
                  :loading="$store.state.isLoading"
                  type="primary"
                  size="mini"
                  @click="updateMenuLi(scope.row)"
                >编辑</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="deleteMenu(scope.row.id)"
                  type="danger"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </tableComponents>

      <el-dialog
        :close-on-click-modal="false"
        title="房产分类"
        width="800px"
        @close="closeDio"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form" ref="form" :rules="rules">
          <el-form-item label="分类标题" prop="title" :label-width="formLabelWidth">
            <el-col :span="12">
              <el-input v-model="form.title" autocomplete="off" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="上级栏目" :label-width="formLabelWidth" prop="parent_id">
            <el-col :span="12" class="tl">
              <el-cascader
                :options="option"
                :props="optionProps"
                :show-all-levels="false"
                v-model="op"
                size="small"
                change-on-select
                style="width:100%"
                :placeholder="placeText"
                @change="handleItemChange"
              ></el-cascader>
            </el-col>
          </el-form-item>
          <el-form-item label="图片地址" prop="piclink" :label-width="formLabelWidth">
            <el-col :span="12" class="tl">
              <el-input v-model="form.piclink" autocomplete="off" clearable class="mar_bottom_5"></el-input>
              <uploadpic
                :piclink="form.piclink"
                :width="150"
                :height="150"
                :real_width="150"
                :real_height="150"
                :is_more="false"
                @send_pic="onSuccess"
              ></uploadpic>
            </el-col>
          </el-form-item>
          <el-form-item class="tc bor_top pd_top_10">
            <el-button
              :loading="$store.state.isLoading"
              type="primary"
              @click="addMenu('form')"
              size="mini"
            >立即提交</el-button>
            <el-button :loading="$store.state.isLoading" @click="resetForm('form')" size="mini">重 置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import menuForm from "@/components/currency/menuMessageBox.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  data() {
    return {
      data: [],
      xy_down: 0,
      xy_down_text: "全部隐藏",
      hackReset: true,
      add: "",
      op: [],
      option: [],
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      dialogFormVisible: false,
      form: {
        title: "",
        parent_id: "0",
        piclink: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入商品类别名称", trigger: "blur" }
        ],
        parent_id: [
          { required: true, message: "请添加栏目", trigger: "change" }
        ]
      },
      formLabelWidth: "120px",
      showImg: false,
      fileList: [],
      placeText: "请选择栏目添加",
      loading: false
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getProductList();
  },
  methods: {
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      this.$api.getEstate.sortInputCat(params).then(res => {
        if (res.data.code == 200) {
          this.getProductList();
        }
      });
    },
    sortrow(row) {},
    closeDio() {
      this.dialogFormVisible = false;
      this.form = {
        title: "",
        parent_id: "0",
        piclink: ""
      };
      this.showImg = false;
      this.op = [];
    },
    getProductList() {
      this.loading = true;
      var params = {};
      params.parent_id = "";
      this.$api.getEstate.getEstateCateTreeList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.option = res.data.result;
          this.data = res.data.result.filter(item => {
            if (item.z) {
              item.title = item.title;
              item.length = item.z.length;
              item.z = item.z.filter(it => {
                if (it.z) {
                  it.title = it.title;
                  it.length = it.z.length;
                  it.z = it.z.filter(t => {
                    if (t.z) {
                      t.title = t.title;
                      t.length = t.z.length;
                      t.children = t.z;
                    } else {
                      t.length = 0;
                    }
                    t.three = "三";
                    t.index = 2;
                    return t;
                  });
                  it.children = it.z;
                } else {
                  it.length = 0;
                }

                it.three = "二";
                it.index = 1;
                return it;
              });
              item.children = item.z;
              item.three = "一";
              return item;
            } else {
              item.length = 0;
              item.three = "一";
              item.index = 0;
              return item;
            }
          });
        }
        this.loading = false;
      });
    },
    addMenu(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          var params = {};
          params = this.form;
          if (
            params.piclink == null ||
            params.piclink.lastIndexOf("png") +
              params.piclink.lastIndexOf("jpg") <=
              0
          ) {
            params.piclink = "";
          }
          if (params.id) {
            this.$api.getEstate.updateProductCat(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                this.getProductList();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            this.$api.getEstate.addProductCat(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                this.getProductList();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    handleItemChange(val) {
      this.form.parent_id = val[val.length - 1];
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    deleteMenu(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getEstate.delProductCat(data).then(res => {
            if (res.status == 200 && res.data.code == 400) {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            } else if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getProductList();
              //刷新页面。。。
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    updateMenuLi(row) {
      this.op = [];
      this.dialogFormVisible = true;

      this.showImg = true;
      this.$api.getEstate.findProduct({ id: row.id }).then(res => {
        if (res.data.code == 200) {
          this.form = res.data.result;
          this.op = res.data.result.up_id.split("@");
        }
      });
    },
    getSortData(da) {
      this.$api.getEstate.sortProductCat(da).then(res => {
        this.getProductList();
      });
    },
    toggle() {
      this.xy_down += 1;
      if (this.xy_down % 2 == 0) {
        this.xy_down_text = "全部隐藏";
      } else {
        this.xy_down_text = "全部显示";
      }
    },
    onSuccess(pic) {
      this.form.piclink = pic;
      this.showImg = true;
    },
    gethandSwitch(obj) {
      var params = {};
      params = obj;
      this.$api.getEstate.updateProductCat(params).then(res => {
        if (!res.data.result) {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    }
  },
  components: {
    HeadTitle,
    compressimgUpload,
    uploadpic
  }
};
</script>
